<template>
    <div class="admin_list">
        <div class="admin_list_box">
            <div>
                <el-button type="primary" style="margin-top: 1px;" @click="addAdmin()">+新增管理员</el-button>
            </div>
            <div class="operation_admin">
                <span class="delect-intent" style="color: #000c17;font-weight: bold;" v-if="moreDelectId.length" @click="batchDelet">删除 <i class="el-icon-delete"></i></span>
                <span class="delect-intent" style="cursor: no-drop;" v-else>删除 <i class="el-icon-delete"></i></span>
            </div>
            <!--    管理员信息列表    -->
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    :row-class-name="tableRowClassName"
                    @selection-change="selectFun">
                <el-table-column
                        type="selection"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="编号"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话">
                </el-table-column>
                <el-table-column
                        prop="data"
                        label="加入日期">
                </el-table-column>
                <el-table-column
                        prop="approvalName"
                        label="创建者">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" style="cursor: no-drop">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--    添加管理员    -->
            <add-admin ref="add_admin"></add-admin>
        </div>
    </div>

</template>

<script>
    import AddAdmin from "./addAdmin";
    export default {
        name: "adminList",
        components: {AddAdmin},
        data() {
            return {
                tableData: [{
                    id: 1,
                    name: '杨燊',
                    phone:15718604576,
                    data:'2020年10月27日',
                    approvalName:'本人'
                },{
                    id: 2,
                    name: '侯馨琳',
                    phone:15286780475,
                    data:'2020年11月5日',
                    approvalName:'杨燊'
                },{
                    id: 3,
                    name: '刘伟',
                    phone:18285772114,
                    data:'2020年11月5日',
                    approvalName:'杨燊'
                },{
                    id: 4,
                    name: '周海燕',
                    phone:18785066320,
                    data:'2020年11月5日',
                    approvalName:'杨燊'
                },{
                    id: 5,
                    name: '吕加',
                    phone:15722124053,
                    data:'2020年11月5日',
                    approvalName:'杨燊'
                },{
                    id: 6,
                    name: '李举阳',
                    phone:18212759501,
                    data:'2020年11月5日',
                    approvalName:'杨燊'
                }],
                moreDelectId:''
            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            selectFun(selection){
                this.moreDelectId = selection;
            },
            batchDelet(){
                this.$message({
                    type: 'warning',
                    message: '暂无权限!'
                });
            },
            addAdmin(){
                this.$refs.add_admin.openDrawer();
            }
        }

    }
</script>

<style lang="scss" scoped>
.admin_list{
    .admin_list_box{
        height: 550px;
        overflow: auto;
    }
    .admin_list_box::-webkit-scrollbar {
        width: 4px;
        scrollbar-arrow-color:red;
    }
    .block{
        text-align: center;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
    .operation_admin{
        height: 50px;
        width: 100%;
        .delect-intent{
            font-size: 16px;
            color: #c0c4cc;
            letter-spacing: 0.56px;
            line-height: 60px;
            margin-left: 40px;
            cursor: pointer;
        }
    }
}
</style>
